<template>
    <div class="container">
        <el-page-header @back="goBack" content="上门价"></el-page-header>
        <!-- 分类 -->
        <div class="type-state e-m-t-45 e-m-b-30">
            <span class="e-p-l-30 e-p-r-30" v-for="(item, index) in statusArr" :key="index"
                :class="{ 'on': state == item.value }" @click="goPage(item.value)">{{ item.name }}</span>
        </div>

        <el-row type="flex" justify="space-between">
            <el-col :span="3">
                <el-button type="primary" icon="el-icon-plus" @click="createdGroup">新建地区分组</el-button>
            </el-col>
            <el-col class="text-right">
                <el-form :inline="true"  class="nav-bar-form">
                    <el-form-item label="选择地区" prop="remarks">
                        <el-cascader separator="-" @change="filterSearchCity" filterable :props="{
                            lazy: true,
                            checkStrictly: true,
                            lazyLoad: loadCity,
                            label: 'name',
                            value: 'id'
                        }" placeholder="选择地区" style="width: 100%;margin-right: 20px" clearable></el-cascader>
                    </el-form-item>
                    <!-- <el-form-item>
                        <el-button type="primary" @click="getSmallTypeList(typeObj,chooseIndex)">查询</el-button>
                    </el-form-item> -->
                </el-form>
            </el-col>
        </el-row>
        <!-- 上门回收价格列表 -->
        <el-table :data="tableData" stripe :border="true">
            <el-table-column label="地区分组" prop="city">
                <template slot-scope="scope">
                    <span v-if="scope.row.city">{{ scope.row.city.citynames }}</span>
                </template>
            </el-table-column>
            <el-table-column label="备注" prop="remarks">
                <template slot-scope="scope">
                    <span>{{ scope.row.remarks || '无' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="生效时间" prop="updatedatetime"></el-table-column>
            <el-table-column label="是否启用">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.state" @change="switchState($event, scope.row.id)"></el-switch>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="edit(scope.row.id)">编辑</el-button>
                    <el-button type="text" size="small" @click="setting(scope.row)">设置</el-button>
                    <el-button type="text" size="small" @click="del(scope.row.id)">删除</el-button>
                    <el-button type="text" size="small" @click="downloadExcel(scope.row.id,`${scope.row.city.cityname}上门价`)">导出excel</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 新建地区分组 -->
        <el-dialog :title="dialogType == 'add' ? '新建地区分组' : '编辑地区分组'" :visible.sync="dialogVisible" width="600px"
            @close="dialogVisible = false">
            <el-form ref="form" :model="form" >
                <el-form-item label="选择地区">
                    <el-cascader separator="-" @change="SelectSearchCity" filterable :props="{
                        lazy: true,
                        checkStrictly: true,
                        lazyLoad: loadCity,
                        label: 'name',
                        value: 'id'
                    }" placeholder="选择地区" style="width: 100%;margin-right: 20px" clearable></el-cascader>
                </el-form-item>
                <el-form-item label="描述" prop="remarks">
                    <el-input v-model="form.remarks" type="textarea" :rows="3"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button v-if="dialogType == 'add'" type="primary" @click="submitCreatedGroup">添加</el-button>
                <el-button v-if="dialogType == 'edit'" type="primary" @click="submitEditGroup">修改</el-button>
            </span>
        </el-dialog>
        <!-- 设置 -->
        <el-dialog title="地区分组设置" :visible.sync="settingDialogVisible" width="1200px"
            @close="settingDialogVisible = false">
            <el-descriptions class="e-m-b-30" title="" :column="2" border>
                <el-descriptions-item label="地区分组">
                    <div class="flex" style="align-items: center;">
                        <span class="e-p-l-5" v-if="form.city">{{ form.city.citynames }}</span>
                    </div>
                </el-descriptions-item>
                <el-descriptions-item label="生效时间">{{ form.updatedatetime }}</el-descriptions-item>
                <el-descriptions-item label="状态">{{ form.usestate }}</el-descriptions-item>
                <el-descriptions-item label="备注">{{ form.remarks }}</el-descriptions-item>
            </el-descriptions>
            <div class="e-p-b-30">
                <el-button type="primary" icon="el-icon-plus" @click="createdPriceType(form.id)">新建小类价格</el-button>
            </div>
            <el-table :data="settingList" stripe>
                <el-table-column label="小类名称" prop="product">
                    <template slot-scope="scope">
                        <span v-if="scope.row.product">{{ scope.row.product.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="默认上门回收价格" prop="defaultonsite">
                    <template slot-scope="scope">
                        <span v-if="scope.row.defaultonsite">{{ scope.row.defaultonsite.price }}</span>
                        <span v-if="scope.row.defaultonsite.edit">(允许改价)</span>
                    </template>
                </el-table-column>
                <el-table-column label="上门回收价格" prop="onsiteuser">
                    <template slot-scope="scope">
                        <span v-if="scope.row.onsiteuser">{{ scope.row.onsiteuser.price }}</span>
                        <span v-if="scope.row.onsiteuser.edit">(允许改价)</span>
                    </template>
                </el-table-column>
                <el-table-column label="更新时间" prop="updatedatetime">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="editPrice(scope.row)">编辑</el-button>
                        <el-button type="text" size="small" @click="delPrice(form.id, scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="settingDialogVisible = false">取消</el-button>
                <!-- <el-button type="primary">保存</el-button> -->
            </span>
        </el-dialog>
        <!-- 新建或编辑小类价格 -->
        <el-dialog :title="editDialogType == 'add' ? '新建小类价格' : '编辑小类价格'" :visible.sync="editDialogVisible" width="600px" @close="editDialogVisible = false">
            <el-form ref="form" :model="editPriceForm" label-width="100px">
                <el-form-item label="选择品类" v-if="editDialogType == 'add'">
                    <selectProduct v-model="editPriceForm.productId" @select="chooseProduct"></selectProduct>
                </el-form-item>
                <el-form-item label="上门价设置" prop="onsiteuser">
					<div class="flex e-m-b-15" style="align-items: center;">
						<el-input 
							type="number"
							class="e-flex-1 e-m-r-10" style="align-items: center"
							v-model="editPriceForm.onsiteuser.price">
							<template slot="prepend">价格</template>
							<!-- <span slot="suffix" class="el-input__icon">元/{{ smallTypeObj.isweighing?'公斤':'件' }}</span> -->
						</el-input>
						<el-switch v-model="editPriceForm.onsiteuser.edit" active-text="允许修改"></el-switch>
					</div>
                    <div class="flex e-m-b-15" style="align-items: center;" v-if="editPriceForm.onsiteuser.edit == true">
                        <el-input 
							type="number"
							class="e-flex-1 e-m-r-10" style="align-items: center"
							v-model="editPriceForm.onsiteuser.minprice">
							<template slot="prepend">允许修改最低价格</template>
							<!-- <span slot="suffix" class="el-input__icon">元/{{ smallTypeObj.isweighing?'公斤':'件' }}</span> -->
						</el-input>
                    </div>
                    <div class="flex" style="align-items: center;" v-if="editPriceForm.onsiteuser.edit == true">
                        <el-input 
							type="number"
							class="e-flex-1 e-m-r-10" style="align-items: center"
							v-model="editPriceForm.onsiteuser.highprice">
							<template slot="prepend">允许修改最高价格</template>
							<!-- <span slot="suffix" class="el-input__icon">元/{{ smallTypeObj.isweighing?'公斤':'件' }}</span> -->
						</el-input>
                    </div>
				</el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="sumbitCreatedPriceType">保存</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    layout: 'admin',
    head() {
        return {
            title: '上门价' 
        }
    },
    data() {
        return {
            loading: false,
            pageIndex: 1,
            pageSize: 999,
            total: 0,
            cityId: 0,
            key: '',
            tableData: [],
            statusArr: [
                {
                    name: '默认价格',
                    value: 1
                },
                {
                    name: '上门价',
                    value: 2
                },
                {
                    name: '站点价',
                    value: 3
                },
                {
                    name: '客户组价',
                    value: 4
                }
            ],
            state: 2,
            form: {
                cityId: 0,
                remarks: ''
            },
            dialogType: 'add',
            dialogVisible: false,
            settingDialogVisible: false,
            settingList: [],
            typeId: 0,
            // 新建或编辑小类价格
            editDialogType: 'add',
            editDialogVisible: false,
            editPriceForm: {
                priceid: 0,
                productId: 0,
                onsiteuser: {
                    edit: true,
                    price: 0,
                    minprice: 0,
                    highprice: 0
                }
            }
        }
    },
    mounted() {
        this.getList()
    },
    methods: {
        // 跳转页面
        goPage(value) {
            switch (value) {
                case 1:
                    this.$router.push(`/price/default`)
                    break
                case 2:
                    this.$router.push(`/price/onsite`)
                    break
                case 3:
                    this.$router.push(`/price/store`)
                    break
                case 4:
                    this.$router.push(`/price/enterprise`)
                    break
            }
        },
        // 返回上一页
        goBack() {
            this.$router.go(-1)
        },
        // 获取上门回收价格列表
        getList() {
            this.$axios.post('/Waste/OnsitePrice/List', {
                "pageIndex": 1,
                "pageSize": 999,
                "cityId": this.cityId,
                // "remarks": this.form.remarks
            }).then((res) => {
                let datas = res.rows
                datas.forEach((item) => {
                    if (item.usestate == '已启用') {
                        item.state = true
                    } else {
                        item.state = false
                    }
                })
                this.tableData = datas
            })
        },
        //修改状态
        switchState(event, id) {
            this.$axios.get('/Waste/OnsitePrice/SetState', {
                params: {
                    id: id,
                    state: event ? '已启用' : '已冻结'
                }
            }).then((res) => {
                if (res.status == 0) {
                    this.$message.success(res.msg);
                } else {
                    this.$message.error(res.msg);
                }
            }).catch((err) => {
                this.getList()
            })
        },
        // 删除分类
        del(id) {
            this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$axios.get('/Waste/OnsitePrice/Del?id=' + id).then((res) => {
                    this.$message.success(res.msg);
                    this.getList()
                })
            })
        },
        // 删除地区分组价格
        delPrice(pid, id) {
            this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$axios.get('/Waste/OnsitePriceDetail/Del?id=' + id).then((res) => {
                    this.$message.success(res.msg);
                    this.$axios.get('/Waste/OnsitePriceDetail/List?priceId=' + pid).then((res) => {
                        this.settingList = res
                    })
                })
            })
        },
        // 编辑分组
        edit(id) {
            this.$axios.get('/Waste/OnsitePrice/Detail?id=' + id).then((res) => {
                console.log(res)
                this.dialogType = 'edit'
                this.dialogVisible = true
                this.form.id = res.id
                this.form.cityId = res.city.cityid
                this.form.remarks = res.remarks
                this.getList()
            })
        },
        // 设置 
        setting(obj) {
            this.form = obj
            this.$axios.get('/Waste/OnsitePriceDetail/List?priceId=' + obj.id).then((res) => {
                this.settingList = res
                this.settingDialogVisible = true
            })
        },
        // 新建地区分组
        createdGroup() {
            this.dialogType = 'add'
            this.dialogVisible = true
            this.form = {
                cityId: 0,
                remarks: ''
            }
        },
        // 确认提交地区分组
        submitCreatedGroup() {
            this.$axios.post('/Waste/OnsitePrice/Create', {
                "cityId": this.form.cityId,
                "remarks": this.form.remarks
            }).then((res) => {
                this.$message.success(res.msg);
                this.dialogVisible = false;
                this.getList()
            })
        },
        submitEditGroup() {
            this.$axios.post('/Waste/OnsitePrice/Edit', {
                "id": this.form.id,
                "cityId": this.form.cityId,
                "remarks": this.form.remarks
            }).then((res) => {
                this.$message.success(res.msg);
                this.dialogVisible = false;
                this.getList()
            })
        },
        filterSearchCity(v) {
            this.cityId = v[v.length - 1];
            this.getList()
        },
        SelectSearchCity(v) { //选择城市
            this.form.cityId = v[v.length - 1];
        },
        loadCity(node, resolve) { //加载城市
            this.$axios.post('/city/List', {
                pageIndex: 1,
                pageSize: 9999,
                pId: node.level == 0 ? '0' : node.value
            }).then((res) => {
                node = res.rows.map(function (c) {
                    return {
                        id: c.id,
                        name: c.name,
                        leaf: node.level >= 3
                    }
                });
                resolve(node);
            })
        },
        chooseProduct(obj){
            console.log('选择品类',obj)
            this.typeId  = obj.typeid
            this.editPriceForm.productId = obj.id
        },
        // 
        createdPriceType(priceid){
            console.log('priceid',priceid)
            this.editDialogType = 'add'
            this.editDialogVisible = true
            this.editPriceForm= {
                priceid: priceid,
                productId: 0,
                onsiteuser: {
                    edit: true,
                    price: 0,
                    minprice: 0,
                    highprice: 0
                }
            }
        },
        // 创建或修改上门回收价格
        sumbitCreatedPriceType(){
            this.$axios.post('/Waste/OnsitePriceDetail/Save',this.editPriceForm).then((res)=>{
                this.$message.success(res.msg);
                this.editDialogVisible = false;
                this.$axios.get('/Waste/OnsitePriceDetail/List?priceId=' + this.editPriceForm.priceid).then((res) => {
                    this.settingList = res
                })
            })
        },
        // 编辑地区分组价格
        editPrice(form) {
            console.log('编辑地区分组价格',form)
            this.editPriceForm = form
            this.editPriceForm.productId = form.product.id
            this.editDialogType = 'edit'
            this.editDialogVisible = true
        },
        downloadExcel(id,downloadFileName) {
            //导出
            let param = {
                id: id,
                downloadFileName: downloadFileName
            }
            this.$axios.post('/Waste/OnsitePrice/Download', 
                param,
                {
                    responseType: 'blob'
                }
            ).then((res)=>{
                let content = res;
                let fileName = `${downloadFileName}.xls`
                this.utils.saveAndExport(content, fileName)
            })
        }
    }
}
</script>

<style lang="scss" scoped></style>